<template>
    <el-drawer v-model="isShowDrawer" direction="rtl" :before-close="handleClose" :size="curDrawerSize"
      :close-on-click-modal="false">
      <template #header="{ titleId, titleClass }">
        <div class="zs-drawer-header" :id="titleId" :class="titleClass">
          <i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
          <div class="zs-title zs-text-black">导入</div>
        </div>
      </template>
      <template #default>
        <el-container class="zs-drawer-container">
          <el-scrollbar class="zs-drawer-content">
            <div class="zs-align-center zs-space-bottom" id="import-drawer-down">
              <i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
              <div class="zs-title">下载模板</div>
            </div>
            <div class="zs-card-lg zs-space-bottom">
              <el-button class="zs-btn-rectangle" @click="handleDownload">
                <el-icon>
                  <Download />
                </el-icon>
                下载模板
              </el-button>
              <div class="zs-text-gray zs-text-sm zs-space-top">
                *下载模版，根据提示信息完善表格内容。
              </div>
            </div>
            <!-- jhy-添加插槽 -->
            <slot />
            <div class="zs-align-center zs-space-top-lg zs-space-bottom" id="import-drawer-upload">
              <i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
              <div class="zs-title">导入文件</div>
            </div>
            <div class="zs-card-lg zs-space-bottom">
              <el-upload action="" ref="uploadRef" :accept="props.fileTypes" :auto-upload="false" :http-request="importFile"
                v-model:file-list="fileList" :limit="uploadLimit || 5" :on-exceed="handleExceed" class="upload-demo" drag>
                <el-icon class="el-icon--upload">
                  <upload-filled />
                </el-icon>
                <div class="el-upload__text">
                  将文件拖住到此处，或<em>点击上传</em>
                </div>
                <template #tip>
                  <div class="zs-text-gray zs-text-sm zs-space-top">
                    *可直接将文件拖拽到此处进行上传，支持xlsx、xls格式。
                  </div>
                </template>
              </el-upload>
            </div>
          </el-scrollbar>
          <DocWrapper v-if="isShowDrawer" :nodeList="curNodeList"></DocWrapper>
        </el-container>
      </template>
      <!-- 详情抽屉 footer可以不要 根据实际需求定-->
      <template #footer>
        <div>
          <el-button class="zs-btn-md zs-btn-primary" @click="confirmClick">导入</el-button>
        </div>
      </template>
    </el-drawer>
  </template>
  
  <script setup>
  import DocWrapper from "@/components/DocWrapper.vue";
  import { ElMessage, genFileId } from "element-plus";
  import { ref } from "vue";
  import { useStore } from "vuex";
  let store = useStore();
  const curDrawerSize = ref(store.state.uiDrawerSize);
  
  const curNodeList = ref([
    { name: "下载模板", id: "import-drawer-down" },
    { name: "导入文件", id: "import-drawer-upload" },
  ]);
  
  let fileList = ref([]);
  
  const props = defineProps({
    isShow: { type: Boolean, default: false },
    importFun: { type: Function },
    uploadLimit: { type: Number, default: 1 },
    fileTypes: { type: String, default: '.xlsx,.xls' }, // 文件可上传的类型
    // jhy 添加配合插槽使用的自定义设置导航菜单方法
    setCurNodeList: { type: Function },
  });
  
  if (props.setCurNodeList) {
    props.setCurNodeList(curNodeList);
  }
  
  const isShowDrawer = ref(props.isShow);
  let uploadRef = ref();
  const emit = defineEmits(["close", "download", "clickImportBtn"]);
  async function confirmClick() {
    if (fileList.value.length < 1) {
      ElMessage({
        message: `未选择导入文件`,
        type: "warning",
      });
      return;
    } else {
      let flg = checkFileType();
      if (flg) {
        await uploadRef.value.submit();
        isShowDrawer.value = false;
        emit("clickImportBtn", [...importParams.value]);
        importParams.value = [];
      }
    }
  }
  const checkFileType = () => {
    let flg = true;
    for (var fileItem of fileList.value) {
      const nameList = fileItem.name.split('.')
      const nameLength = nameList.length
      let nameType = "." + nameList[nameLength-1];
      const types = props.fileTypes.split(',')
      const typesStr = types.join('|')
      let reg = new RegExp(`(${typesStr})`);
      // let reg = /(xls|xlsx)/;
      if (!reg.test(nameType)) {
        ElMessage.error(`只能上传${props.fileTypes}文件`);
        flg = false;
        break;
      }
    }
    return flg;
  };
  const handleClose = (done) => {
    emit("close", { isShow: false });
    done();
  };
  
  const handleDownload = () => {
    emit("download");
  };
  
  // 导入
  let importParams = ref([]);
  const importFile = (params) => {
    importParams.value.push(params);
  };
  
  function handleExceed(files) {
    if (props.uploadLimit == 1) {
      uploadRef.value.clearFiles();
      const file = files[0];
      file.uid = genFileId();
      uploadRef.value.handleStart(file);
    }
  }
  
  defineExpose({ handleClose });
  </script>
  
  <style scoped lang="scss"></style>
  